<template>
	<div class="pt20 pb10 flex col-box row-between text-center">
		<div class="relative" v-for="(item,j) in array" :key="j"
		:style="{'width': setWidth()}">
			<div class="progerss relative" 
			:class="[{'active':item.status == true}]"
			:style="{'width':j != (array.length - 1) ?'94%':0}"></div>
			<div class="mt30 fs18 color2"
			:class="[{'color333':item.status == true},{'color3':item.status == false}]"
			>
				{{item.name}}
			</div>
			<div class="color2 mt15 fs14">{{item.time}}</div>
		</div>
	</div>
</template>

<script>
	export default{
		props:{
			array:{
				type:Array,
				default:res=>{return []}
			}
		},
		data(){
			return{
				
			}
		},
		methods:{
			setWidth(){
				return (100 / this.array.length)+'%'
			},
		}
	}
</script>

<style lang="scss" scoped>
	.progerss{
		height: 2px;
		left: 52%;
		background-color: #BBBDBF;
		&::after{
			content: '';
			position: absolute;
			background-color: #BBBDBF;
			width: 20px;
			height: 20px;
			border-radius: 50%;
			left: -25px;
			top: -8px;
		}
	}
	.active{
		&:before{
			content: '';
			position: absolute;
			background: #4DACB1;
			left: 0;
			height: 2px;
			width: 100%;
		}
		&::after{
			background-color: #4DACB1;
		}
	}
</style>